<template>
      <div >
        <!-- <div class="top">
          <yd-flexbox>
            <yd-flexbox-item class="text-center">
              <div v-if="show2 == true" style="text-align:center" @click="del">
                <hd-svg-icon name="hd-yduishanchu" slot="left" size="20px" color="#000"></hd-svg-icon>
              </div>
            </yd-flexbox-item>
            <yd-flexbox-item class="text-center" @click.native="show1 = true">
              <span>我的足迹 </span>
              <span>
                <hd-svg-icon name="hd-arrow" slot="left" size="20px" color="#000"></hd-svg-icon>
              </span>           
            </yd-flexbox-item>
            <yd-flexbox-item class="text-right" @click.native="show2 = !show2">
               <span class="edit">编辑</span>
            </yd-flexbox-item>
        </yd-flexbox>
        </div> -->
        <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>       
          <div class="main-body" v-for="(item,index) in list" :key="item.index" slot="list" @touchstart="showDeleteButton" @touchend="clearLoop">        
            <!-- <router-link :to="{path:'',query: {id:item.place_id}}"> -->
              <div class="checkdiv" v-if="show2 == true">
                <yd-checkbox-group v-model="checkbox">
                  <yd-checkbox :val="JSON.stringify(item)" shape="circle">&nbsp;</yd-checkbox>
                </yd-checkbox-group>
              </div>   
              <div class="left-body">
                <img :src="item.source_image" class="right-body-img" alt="">
              </div>
              <!-- 点击图片右侧跳转 -->
              <router-link :to="{path:item.path,query: {id:item.source_id}}">
                <div class="right-body">
                  <p class="title" @click.native = "tab1" style="height:50px">{{item.source_name}}</p>
                  <p style="height:30px">
                    <span style="font-size:17px;color:orange" v-if="item.average_consumption">￥{{item.average_consumption}}/人</span>    
                  </p> 
                  <p>
                     <span style="color:gray;float:left;line-height:20px;height:20px">{{item.create_time}}</span>
                  </p>
                </div>
              </router-link>
            <!-- </router-link> -->
          </div>          
      </yd-infinitescroll>
      
      
      <!-- 下方弹出框 -->
      <yd-popup v-model="show1" position="bottom" width="90%">
        <yd-flexbox>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" size="small" style="margin:10px;width:50%" @click.native = "load2()">全部</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" size="small" style="margin:10px;width:50%" @click.native = "load2('M')"> 枫红·食</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" size="small" style="margin:10px;width:50%" @click.native = "load2('H')"> 郁金·住</yd-button></yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('J')"> 蔚蓝·游</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('T')"> 竹绿·行</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('S')"> 灵紫·购</yd-button></yd-flexbox-item>
        </yd-flexbox>
        <yd-flexbox>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('L')"> 精品线路</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"><yd-button type="primary" bgcolor="#00C5CD" style="margin:10px;width:50%" @click.native = "load2('A')"> 热门游记</yd-button></yd-flexbox-item>
            <yd-flexbox-item class="text-center"></yd-flexbox-item>
        </yd-flexbox>
      </yd-popup>
    </div>
</template>
<script>
export default {
  name: 'myCollection',
  data() {
    return {
      list: [],
      pageNo: 1,
      pageSize: 6,
      show1: false,
      show2: false,
      checkbox: [],
      list1: [{source_name: '呵呵'}, {source_name: '哈哈'}],
      canshu: this.$route.query.canshu,
      delList: []
    }
  },
  mounted: function() {
    this.load(this.canshu);
  },
  methods: {
    load(value) {
      this.hdAjax({
        url: this.API.findFootprintList,
        data: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          type: value
        },
        success: (resultData) => {
          const _list = resultData.data.results;
          console.log('!@#!@$#%$#^#$$');
          console.log(_list);
          _list.forEach(function(element) {
            if (element.type === 'M') {
              element['path'] = 'redinfo'
            }
            if (element.type === 'H') {
              element['path'] = 'liveinfo'
            }
            if (element.type === 'S') {
              element['path'] = 'buyinfo'
            }
            if (element.type === 'T') {
              element['path'] = 'rentComInfo'
            }
            if (element.type === 'J') {
              element['path'] = 'recomment_detail'
            }
            if (element.type === 'L') {
              element['path'] = 'boutiquelinedetail'
            }
            if (element.type === 'A') {
              element['path'] = 'travelnotesinfo'
            }
          }, this);
          this.list = [...this.list, ..._list];
          if (_list.length < this.pageSize) {
            /* 所有数据加载完毕 */
            console.log(999);
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          console.log('可加载');
          /* 单次请求数据完毕 */
          this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          this.pageNo++;
          console.log(this.pageNo);
        }
      });
      this.show1 = false;
    },
    load2(value) {
      this.$router.push({path: 'myFootprint', query: {canshu: value}});
      location.reload();
    },
    del() {
      this.$dialog.confirm({
        title: '删除',
        mes: '确定要删除已选中内容？！',
        opts: [
          {
            txt: '取消',
            color: false,
            callback: () => {
              return;
            }
          },
          {
            txt: '确定',
            color: 'true',
            callback: () => {
              console.log(this.checkbox);
              this.checkbox.forEach((item) => {
                console.log(JSON.parse(item).id);
                this.delList.push({id: JSON.parse(item).id});
              });
              console.log(this.delList);
              this.hdAjax({
                url: this.API.deleteFootprint,
                data: {
                  list: this.delList
                },
                method: 'post',
                success: (resultData) => {
                  this.$dialog.toast({mes: '已删除', timeout: 1000});
                  this.$router.push({path: 'myFootprint', query: {canshu: this.canshu}});
                  location.reload();
                }
              });
              // this.$router.push({path: 'myCollection', query: {canshu: this.canshu}});
              // location.reload();
              // this.$dialog.toast({mes: '已删除', timeout: 1000});
            }
          }
        ]
      });
    },
    showDeleteButton() {
      clearInterval(this.Loop);// 再次清空定时器，防止重复注册定时器
      this.Loop = setTimeout(function() {
        this.isDeleting = true;
      }, 1000);
    },
    clearLoop() {
      clearInterval(this.Loop);
    },
    change() {
      console.log(this.checkbox);
    }
  }
}
</script>

<style>
.text-center{
text-align: center
}
.text-right{
text-align: right
}
.checkdiv{
float:left;
height:100%;
line-height:60px;
margin-left:5px
}
.top{
  height:50px;
  width:100%;
  text-align:center; 
  line-height:50px;
  font-size:20px;
  background-color:white;
  border-bottom:1px solid #F0F0F0;
}
.main-body{
  width:100%;
  height:100px;
  margin-top:10px;
  margin-bottom: 10px;
  background-color: white
}
.right-body{
  margin-left:15px; 
  height:100px;
  float:left;
  width:50%
}
.left-body{
  width:100px;
  height:100px;
  float:left;
}
.right-body-img{
  width:100%;
  height:100%;
}
.edit{
  margin-right:10px;
  font-size:15px;
  color:blue
}
.title{
  overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;/*行数*/
  -webkit-box-orient:vertical;
  font-size:.3rem;
  padding-top:12px;
}
</style>

